<template>
  <div id="app">
    <div class="box-header">
      <h1>GRTS在线教育视频网站后台</h1>
      <p>ONLINE EDUCATION</p>
    </div>
    <div class="box">
      <div class="box-content">
        <img class="lt-img" src="../assets/1.png" width="100px" />
        <img class="rt-img" src="../assets/2.png" width="100px" />
      </div>
      <div>
        <div class="step-box">
          <el-steps :active="2" align-center>
            <el-step title="确认账号"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="重置成功"></el-step>
          </el-steps>
        </div>
        <div class="step-content">
          <el-input
            v-model="passWord"
            show-password
            placeholder="6-13位字符，区分大小写"
            ><template slot="prepend">新密码</template>
          </el-input>
          <el-input
            v-model="passWord2"
            show-password
            placeholder="请输入确认密码"
            ><template slot="prepend">确认密码</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="email" :disabled="true">
            <template slot="prepend">邮箱</template>
          </el-input>
          <el-input v-model="code" placeholder="请输入验证码">
            <template slot="prepend">验证码</template>
            <el-button @click="getCode" slot="append">{{ content }}</el-button>
          </el-input>
          <el-button @click="next" class="confirm" type="primary"
            >下一步</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FormItem } from "element-ui";
// 会把login.vue组件导出到main.js，再根据router的规则来决定替换div标签下面的组件
export default {
  data() {
    return {
      totalTime: 60,
      canClick: false,
      content: "获取验证码",
      passWord: "",
      passWord2: "",
      code: "",
      email: "",
    };
  },
  //vue生命周期函数 dom未挂载
  created() {
    this.email = sessionStorage.getItem("updateEmail");
    if(this.email==null){
      this.$router.push("/confirmemail");
    }
  },
  methods: {
    next() {
      if (this.passWord != this.passWord2) {
        this.$message.error("两次密码不一致");
        return;
      }

      let formDate = new FormData();
      formDate.append("email", this.email);
      formDate.append("code", this.code);
      formDate.append("passWord", this.passWord);

      this.$http
        .post("/user/changePassWord", formDate, {
          Headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          this.$message({
            message: "修改密码成功",
            type: "success",
          });
          //必须存入一个标识符
          sessionStorage.setItem("success","ok");
          sessionStorage.removeItem("updateEmail");
          //跳转到成功页面
          this.$router.push("/changesuccess");
        });
    },
    getCode() {
      if (this.canClick) {
        return;
      }
      //发送axios请求
      this.$http.get("/user/getCode/" + this.email).then((res) => {
        this.$message({
          message: "请去查看邮箱获取验证码",
          type: "success",
        });
      });

      //定时任务
      let id = setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        this.canClick = true;//防止再点击，再点击直接return
        if (this.totalTime == 0) {
          this.content = "获取验证码";
          this.totalTime = 60;
          //关闭定时任务
          clearInterval(id);
        }
      }, 1000);
    },
  },
};
</script>
<style scoped>
#app {
  background-color: #ffd1b7;
  overflow: hidden;
}
.box-header {
  height: 100px;
  margin-top: 80px;
}
.box-header h1 {
  color: #fff;
  text-align: center;
  font-size: 30px;
  line-height: 90px;
  height: 70px;
}
.box-header p {
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.box {
  position: relative;
  border-bottom: 3px solid #fb966f;
  border-right: 3px solid #fb966f;
  background-color: #fee4d4;
  height: 460px;
  width: 750px;
  margin: 0px auto;
  box-shadow: 10px 10px 6px 2px rgb(251 150 108 / 60%);
  overflow: hidden;
}
.lt-img {
  position: absolute;
  left: 0;
  bottom: 0;
}
.rt-img {
  position: absolute;
  right: 0;
  bottom: 0;
}
.step-box {
  margin-top: 50px;
}
.step-content {
  width: 400px;
  margin: 30px auto 30px;
}
.step-content .el-input {
  margin-bottom: 20px;
}
.confirm {
  width: 400px;
}
:deep().el-input-group__prepend {
  width: 60px;
  text-align: center;
}
</style>